<template>
  <div id="app">
    <h1>协议列表</h1>
    <table>
      <thead>
        <tr>
          <th>名称</th>
          <th>描述</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="protocol in protocols" :key="protocol.id">
          <td>{{ protocol.name }}</td>
          <td>{{ protocol.description }}</td>
          <td>
            <button @click="editProtocol(protocol)">编辑</button>
            <button @click="deleteProtocol(protocol)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <div v-show="showForm">
      <h2 v-if="!selectedProtocol">创建新协议</h2>
      <h2 v-else>编辑协议</h2>

      <form @submit.prevent="saveProtocol">
        <label>
          名称：
          <input type="text" v-model="formData.name" />
        </label>
        <br />
        <label>
          描述：
          <textarea v-model="formData.description"></textarea>
        </label>
        <br />
        <button type="submit">{{ selectedProtocol ? '保存' : '创建' }}</button>
        <button type="button" @click="cancelEdit">取消</button>
      </form>
    </div>

    <div v-show="!showForm">
      <button @click="createProtocol">创建协议</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      protocols: [],
      selectedProtocol: null,
      showForm: false,
      formData: {
        name: "",
        description: "",
      },
    };
  },
  created() {
    this.getProtocols();
  },
  methods: {
    getProtocols() {
      axios.get("/api/protocols/").then((response) => {
        this.protocols = response.data;
      });
    },
    createProtocol() {
      this.selectedProtocol = null;
      this.showForm = true;
      this.formData = {
        name: "",
        description: "",
      };
    },
    editProtocol(protocol) {
      this.selectedProtocol = protocol;
      this.showForm = true;
      this.formData = {
        name: protocol.name,
        description: protocol.description,
      };
    },
    saveProtocol() {
      if (this.selectedProtocol === null) {
        // 创建新协议
        axios.post("/api/protocols/", this.formData).then((response) => {
          this.protocols.push(response.data);
        });
      } else {
        // 更新协议
        axios
          .put("/api/protocols/" + this.selectedProtocol.id, this.formData)
          .then((response) => {
            const index = this.protocols.findIndex(
              (p) => p.id === this.selectedProtocol.id
            );
            this.protocols.splice(index, 1, response.data);
          });
      }

      this.selectedProtocol = null;
      this.showForm = false;
      this.formData = {
        name: "",
        description: "",
      };
    },
    deleteProtocol(protocol) {
      axios.delete("/api/protocols/" + protocol.id).then(() => {
        const index = this.protocols.findIndex((p) => p.id === protocol.id);
        this.protocols.splice(index, 1);
      });
    },
    cancelEdit() {
      this.selectedProtocol = null;
      this.showForm = false;
      this.formData = {
        name: "",
        description: "",
      };
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
table {
  margin: auto;
  border-spacing: 0;
  border-collapse: collapse;
}
th,
td {
  padding: 10px;
  border: 1px solid #ccc;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
form {
  margin: auto;
  width: 50%;
}
label {
  display: block;
  margin-bottom: 10px;
}
textarea {
  width: 100%;
}
</style>